import React, { PureComponent } from 'react';
// import { Row, Col, Card } from 'antd';
import { get as _get } from 'object-path';
// import { Link }  from 'umi';
// import { formatMessage } from 'umi';
import colors from '@/theme';
import ReactEcharts from '@/components/Echarts';
import { dateConversion } from '@/utils/utils';
import styles from '../List.less';

class LeaveCharts extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            dom: ''
        };
    }

    componentDidMount() {
        window.addEventListener('resize', this.resizeEchart);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.resizeEchart);
    }

    // 重置图表
    resizeEchart = () => {
        const { dom } = this.state;
        const width = document.querySelector('#chartsBox').offsetWidth;
        dom.getEchartsInstance().resize({ width });
    };

    returnLimitFont = name => {
        let newName = '';
        if (name.length >= 15) {
            newName = `${name.substring(0, 15)}...`;
        } else {
            newName = name;
        }

        return newName;
    };

    getValue = data => {
        const arr = [];
        data.forEach(item => {
            const list = {
                name: this.returnLimitFont(item.leaveName),
                oldName: item.leaveName,
                value: item.leaveLong
            };
            arr.push(list);
        });
        return arr;
    };

    getPieOption = () => {
        const { data } = this.props;
        const value = this.getValue(data.leaveMap);
        const getLegend = newData => {
            const arr = [];
            newData.forEach(item => {
                arr.push(item.name);
            });
            return arr;
        };

        return {
            color: colors,
            tooltip: {
                trigger: 'item',
                formatter(params) {
                    const html = `<div><i style="display: inline-block;vertical-align: middle;width:8px;height:8px;border-radius: 100%;margin-right:6px;background:${params.color};"></i><span style="color:#aaa">${params.data.oldName}：</span><span>${params.percent}%</span></div>`;
                    return html;
                }
            },
            legend: {
                orient: 'vertical',
                right: '0',
                y: 'center',
                data: getLegend(value)
            },

            series: [
                {
                    type: 'pie',
                    radius: ['70%', '90%'],
                    center: ['25%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: value
                }
            ]
        };
    };

    toPercent = point => {
        let str = Number(point * 100).toFixed(1);
        str += '%';
        return str;
    };

    /**
     * 根据分钟处理成小时分
     * 先判断分钟和小时是否有存在数值
     * 判断三种情况，一种是分钟时都存在，一种只有分钟，一种只有时再进行return
     */
    render() {
        const { data } = this.props;
        return (
            <div className={styles.leaverCharts}>
                <div className={styles.chartsBox} id="chartsBox">
                    <ReactEcharts
                        ref={e => {
                            this.setState({
                                dom: e
                            });
                        }}
                        legendExtra={[
                            name => {
                                const count = this.getPieOption().series[0].data.reduce(
                                    (prev, cur) => prev + cur.value,
                                    0
                                );
                                const result = this.getPieOption().series[0].data.find(item => item.name === name);
                                return result && result.value && this.toPercent(result.value / count);
                            },
                            name => {
                                const resultV = this.getPieOption().series[0].data.find(item => item.name === name);
                                if (resultV && resultV.value) {
                                    return {
                                        value: dateConversion(resultV.value, 8),
                                        style: {
                                            fontSize: 14,
                                            color: 'rbga(0, 0, 0, 0.45)'
                                        }
                                    };
                                }
                                return null;
                            }
                        ]}
                        option={this.getPieOption()}
                        style={{
                            width: '100%',
                            height: '100%'
                        }}
                    />
                    <div className={styles.pieTitle}>
                        <div className={styles.gray}>请假</div>
                        <div>
                            <span>
                                <i>{dateConversion(_get(data, 'totalLeave', 0), 8)}</i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default LeaveCharts;
